<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border: 1px solid black;
            border-collapse: collapse;
            width: 500px;
            text-align: center;
        }

        table th {
            border: 1px solid black;
            text-align: center;
        }

        table td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>职位</th>
            <th>操作</th>
        </thead>
        <tbody>
            <td>1</td>
            <td>索隆</td>
            <td>男</td>
            <td>剑士 </td>
            <td><button id="delnum">删除</button></td>
        </tbody>
    </table>
    <hr>
    编号：<input type="text" id="number"><br>
    姓名：<input type="text" id="username"><br>
    <p>性别：<input type="radio" name="sex" checked>男
        <input type="radio" name="sex">女
    </p>
    职位：<input type="text" id="job"><br>
    <button id="btnAdd">新增</button>
</body>

</html>
<script>
    // 1，动态创建表格（每行最后一个单元格中要有一个删除按钮）
    var arr = [{ "id": "2", "name": "罗宾", "sex": "女", "job": "历史研究员" },
    { "id": "3", "name": "路飞", "sex": "男", "job": "船长" },
    { "id": "4", "name": "娜美", "sex": "女", "job": "航海士" }]
    function $(e) {
        return document.querySelector(e);
    }
    rander()
    function rander() {
        for (let i = 0; i < arr.length; i++) {  //循环遍历要渲染的数据
            var oTr = document.createElement('tr');  //创建tr节点
            for (let key in arr[i]) {   //遍历每一个子数据
                var oTd = document.createElement('td');  //创建td节点
                oTd.innerHTML = arr[i][key]; // 对每一个数据进行渲染
                oTr.appendChild(oTd);  // 将tr插入td
            }
            var oTd = document.createElement("td");  //新建节点
            oTd.innerHTML = '<button class="delnum">删除</button>'  //新建删除节点
            oTr.appendChild(oTd);  // 将tr插入td
            $("tbody").appendChild(oTr)  //将tr插入tbody
        }
    }
    $("#btnAdd").onclick = function () {
        //  一、非空判断，正则验证

        //  二、获取用户的输入
        var id = $("#number").value;
        var name = $("#username").value;

        var sex =document.getElementsByName("sex") ;
        if (sex[0].checked) {
            var sex = "男"
        } else {
            var sex = "女"
        }
        var job = $("#job").value;
        //  三、输出（显示）：给表格添加行
        var oTr = $("tbody").insertRow();
        var oTd = oTr.insertCell();
        oTd.innerHTML=id;
        oTr.insertCell().innerHTML = name;
        oTr.insertCell().innerHTML = sex;
        oTr.insertCell().innerHTML = job;
        oTr.insertCell().innerHTML = `<button class="delnum">删除</button>`;

    }
    // 2，删除表格（点击每行的删除按钮，删除这一行）
    $("tbody").onclick = function (e) {
        if (confirm("亲亲确认要删除吗？")) {
            e.target.parentNode.parentNode.remove();
        };
    }



    // 3，广告弹出窗（自动关闭，window.close()）

</script>